<template>
  <div class="login">
    <div class="userInfo">
      <div class="noLogin">
        <div class="user-icon">
          <img mode="aspectFit" src="/static/img/unlogin.png" alt="">
        </div>

        <div v-show="!isTenantLogin" class="login-form">
          <div class="form-item">
            <CustomInput
              v-model="formItem.userName"
              title="手机号码"
              placeholder="请输入手机号码"
              :isInput="true" />
          </div>
          <div class="form-item">
            <CustomInput
              v-model="formItem.password"
              inputType="password"
              title="密码"
              placeholder="请输入密码"
              :isInput="true" />
          </div>
        </div>

        <div v-show="isTenantLogin" class="login-form">
          <div class="form-item">
            <CustomInput
              v-model="tenantFormItem.idcards"
              title="证件号"
              placeholder="请输入证件号"
              :isInput="true" />
          </div>
          <div class="form-item">
            <CustomInput
              v-model="tenantFormItem.telphone"
              title="手机号码"
              placeholder="请输入手机号码"
              :isInput="true" />
          </div>
        </div>

        <div class="login-btn">
          <div class="loginBtn">
            <button
              open-type="getUserInfo"
              lang="zh_CN"
              @getuserinfo="getUserInfo">绑定微信并登陆</button>
          </div>
          <div v-show="!isTenantLogin" class="actionBtn clear">
            <div class="register pull-left" @tap="newUser">注册账号</div>
            <div class="forget pull-right" @tap="forgetPassword">忘记密码</div>
          </div>
        </div>

        <div class="login-chosen">
          <div class="icon" @tap="changeTenantLogin">
            <span class="iconfont" :class="loginWay.icon"></span>
          </div>
          <div class="title" @tap="changeTenantLogin">{{loginWay.title}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CustomInput from 'components/CustomInput/CustomInput'
import { mapState, mapMutations } from 'vuex'
import { ERR_OK } from 'api/config'
import { getRole } from 'api/app'
import { login, wxLogin, tenantLogin } from 'api/login'
import { shareMixin } from 'common/js/mixins'

export default {
  mixins: [shareMixin()],
  components: {
    CustomInput
  },
  computed: {
    loginWay () {
      let title = '租客'
      let icon = 'icon-zukeguanli'

      if (this.isTenantLogin) {
        title = '房东'
        icon = 'icon-fangdongguanli'
      }

      return {
        title: `切换到${title}登陆`,
        icon
      }
    },
    ...mapState([
      'isTenantLogin'
    ])
  },
  onShow () {
    this.initData()
  },
  data () {
    return {
      formItem: {
        userName: '',
        password: ''
      },
      tenantFormItem: {
        idcards: '',
        telphone: ''
      }
    }
  },
  methods: {
    changeTenantLogin () {
      this.SET_ISTENANTLOGIN(!this.isTenantLogin)
    },
    getUserInfo (e) {
      if (!this.isTenantLogin) {
        if (!this.formItem.userName) {
          this.$showToast({
            title: '请输入手机号',
            icon: 'none'
          })
          return
        }

        if (!this.formItem.password) {
          this.$showToast({
            title: '请输入密码',
            icon: 'none'
          })
          return
        }
      } else {
        if (!this.tenantFormItem.idcards) {
          this.$showToast({
            title: '请输入证件号',
            icon: 'none'
          })
          return
        }

        if (!this.tenantFormItem.telphone) {
          this.$showToast({
            title: '请输入手机号码',
            icon: 'none'
          })
          return
        }
      }

      if (e.target.userInfo) {
        this.SET_USERINFO(e.target.userInfo)

        wx.setStorageSync('userInfo', e.target.userInfo)

        this.wxLogin()
      } else {
        this.$showToast({
          title: '授权失败',
          icon: 'none'
        })
      }
    },
    newUser () {
      wx.navigateTo({
        url: '/pages/newUser/main'
      })
    },
    forgetPassword () {
      wx.navigateTo({
        url: '/pages/forgetPassword/main'
      })
    },
    initData () {
      this.formItem = {
        userName: '',
        password: ''
      }
      this.tenantFormItem = {
        idcards: '',
        telphone: ''
      }
    },
    getRole () {
      return new Promise(async (resolve, reject) => {
        const res = await getRole()

        resolve()

        if (res.code === ERR_OK) {
          this.SET_ROLE(res.data)

          wx.redirectTo({
            url: '/pages/home/main'
          })
        } else {
          this.$showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
    },
    login (openId) {
      return new Promise(async (resolve, reject) => {
        let obj = {
          openId
        }
        let res = {}

        if (!this.isTenantLogin) {
          obj = {
            ...JSON.parse(JSON.stringify(this.formItem)),
            ...obj
          }
          res = await login(obj)
        } else {
          obj = {
            ...JSON.parse(JSON.stringify(this.tenantFormItem)),
            ...obj
          }
          res = await tenantLogin(obj)
        }

        if (res.code === ERR_OK) {
          this.SET_REALUSERINFO(res.data)
          wx.setStorageSync('realUserInfo', res.data)

          if (!this.isTenantLogin) {
            await this.getRole()
          } else {
            wx.redirectTo({
              url: '/pages/homeTenant/main'
            })
          }
        } else {
          this.$showToast({
            title: res.msg,
            icon: 'none'
          })
        }

        resolve()
      })
    },
    async wxLogin () {
      this.$showLoading('登陆中')

      const res = await wxLogin()

      if (res.code === ERR_OK) {
        const { openid } = res.result.data
        this.SET_OPENID(openid)

        wx.setStorageSync('openid', openid)

        await this.login(openid)

        this.$hideLoading()
      } else {
        this.$showToast({
          title: '服务器出错',
          icon: 'none'
        })
      }
    },
    ...mapMutations([
      'SET_OPENID',
      'SET_USERINFO',
      'SET_REALUSERINFO',
      'SET_ISTENANTLOGIN',
      'SET_ROLE'
    ])
  }
}
</script>

<style lang="scss" scoped>
  @import '~common/scss/color';

  .login {
    width: 100%;
    height: 100%;
    // background-color: rgb(248, 248, 248);
    position: relative;
    > .userInfo {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
      > .noLogin {
        width: 100%;
        padding-top: 20px;
        box-sizing: border-box;
        > .user-icon {
          width: 75px;
          height: 75px;
          border-radius: 50%;
          overflow: hidden;
          margin: 0 auto 5px;
          > img {
            width: 100%;
            height: 100%;
          }
        }
        > .login-form {
          width: 90%;
          margin: 0 auto;
          margin-top: 30px;
          > .form-item {
            border-bottom: 1px solid rgb(238, 238, 238);
          }
        }
        > .login-btn {
          width: 90%;
          margin: 0 auto;
          margin-top: 30px;
          > .loginBtn {
            width: 100%;
            > button {
              background-color: $color-default;
              color: white;
            }
          }
          > .actionBtn {
            width: 100%;
            margin-top: 5px;
            > .register,
            > .forget {
              color: #c5c5c5;
              text-decoration: underline;
              font-size: 14px;
            }
          }
        }
        > .login-chosen {
          width: 100%;
          text-align: center;
          position: absolute;
          bottom: 50px;
          > .icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin: 0 auto;
            margin-bottom: 10px;
            background-color: $color-default;
            color: white;
            line-height: 40px;
          }
          > .title {
            font-size: 14px;
            color: #c5c5c5;
          }
        }
      }
    }
  }
</style>
